<!-- 
      find.html
      发现   id="find"
      
      Created by tang on 2017-03-14.
      Copyright 2017 tang. All rights reserved.
 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/find.css" />
</head>
<body class="white">
	<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
	    <div class="mui-scroll">
	    		<div class="mui-content-padded loading" id="vueMain">
	    			<template v-for="(item,index) in list">
	    				<div class="item "  >
		    				<img src="../icon/mask-big.jpg " _id="findDetail" _href="findDetail.html" :_extras="'fid='+item.id" _title="发现" :data-load="item.photo" class="maximg link" alt="" />
		    				<div class="mui-clearfix" >
		    					<div class="mui-pull-right like" :data-idx="index"><img src="../icon/shou.png" alt=""  /> {{item.num}}</div>
		    					<p>{{item.title}}</p>
		    				</div>
		    			</div>
	    			</template>
	    		</div>
	    </div>
	</div>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>	
<script>
	var apps, view, oldDate; 
	
	window.addEventListener('readyVue', function(){
		var first = 0 , last = 10;
	   	getData(function(res){
	   		first = res.length;
	   		initVue(res, res.length, last);
	   	}, first, last);
	});
	function getData(fun, first, last){
		if( !oldDate  ){
			oldDate = new Date().getTime();
			bexta.ajax(api.find_list, fun, {data:{firstrow:first, listrow:last, uid:bexta.getStorage(USER).uid  }});
		}else if( (new Date().getTime()-oldDate) > 5*60*1000 ){
			bexta.ajax(api.find_list, fun, {data:{firstrow:first, listrow:last, uid:bexta.getStorage(USER).uid }});
		}
	}
	mui.plusReady(function () {
	    bexta.getWebview().addEventListener('show', function(){
	    		if( oldDate ){
	    			getData(function(res){
	    				apps.list = res;
	    			}, 0, apps.first);
	    		}
	    });
	})
	function initVue(res, first,last){
		apps = new Vue({
			el:"#vueMain",
			data:{
				list:res,
				first:first,
				last:last
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				bexta.imageLoad('[data-load]');
				
				mui('body').on('tap', '.like', function(){
					var idx = this.getAttribute('data-idx');
					var self = this;
			   		if( !self.getAttribute('data-active') ){
						bexta.ajax(api.find_praise, function(res){
							self.setAttribute('data-active', 1);
							++apps.list[idx].num;
							self.querySelector('img').setAttribute('src', '../icon/shou-active.png')
						}, {data:{id:apps.list[idx].id}})
					}
				});
				
			},
			updated:function(){
				bexta.imageLoad('[data-load]');
			}
		});
	}
	
	mui.init({
	  pullRefresh : {
	    container:'#pullrefresh',
	    down : {
		    callback : downfresh
		   
	    },
	    up : {
	      callback :upfresh 
	    }
	  }
	});
	function downfresh() {
		bexta.ajax(api.find_list,function(res){
			apps.list = res;
			apps.first = apps.list.length;
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
		},{data:{firstrow:0, listrow:apps.first, uid:bexta.getStorage(USER).uid }})
		
	}
	function upfresh(){
		var self = this;
		bexta.ajax(api.find_list,function(res){
			if( res.length == 0 || res.length < apps.last ){
				self.endPullupToRefresh(true);
			}
			if( res.length == apps.last ){
				self.endPullupToRefresh(false);
			}
			if( res.length != 0 ){
				mui.each(res, function(){
					apps.list.push( this );
				});
			}
			apps.first = apps.list.length;
		},{data:{firstrow:apps.first, listrow:apps.last, uid:bexta.getStorage(USER).uid }})
	}
</script>
</body>
</html>
